<template>
  <!--新增 查看 修改 审核 订单促销单-->
    <div>
      <!-- 面包屑导航 -->
      <el-breadcrumb separator-class="el-icon-arrow-right">
        <el-breadcrumb-item  :to="{ path: '/' }" >首页</el-breadcrumb-item>
        <el-breadcrumb-item style="font-size: 18px" >{{order}}订单促销</el-breadcrumb-item>
      </el-breadcrumb>

      <el-row width="100%" style="position: relative;top: 20px;">

        <el-col :span="20" :offset="2">



          <h3 align="left">促销配置</h3>
          <el-divider content-position="right"></el-divider>

          <el-form  label-width="120px" :model="form" class="demo-form-inline" >

            <el-form-item label="促销编码："  >

              <el-input
                :disabled="true"
                type="text"
                v-model="form.address"
                style="width: 380px"
              ></el-input>

            </el-form-item>

            <el-form-item label="促销门店："  >

              <el-input
                :disabled="true"
                type="text"
                v-model="form.address"
                style="width: 380px"
              >
              </el-input>

            </el-form-item>

            <el-form-item label="促销时间："  >


              <div class="block">

                <el-date-picker
                  v-model="value"
                  type="datetimerange"
                  range-separator="至"
                  start-placeholder="开始日期"
                  end-placeholder="结束日期">
                </el-date-picker>

              </div>

            </el-form-item>

            <el-form-item label="促销周期："  >


              <div class="block">



                <el-radio v-model="radio" label="1">周一</el-radio>
                <el-radio v-model="radio" label="2">周二</el-radio>
                <el-radio v-model="radio" label="3">周三</el-radio>
                <el-radio v-model="radio" label="4">周四</el-radio>
                <el-radio v-model="radio" label="5">周五</el-radio>
                <el-radio v-model="radio" label="6">周六</el-radio>
                <el-radio v-model="radio" label="7">周日</el-radio>

              </div>

            </el-form-item>



            <el-form-item label="促销对象："  >


              <div class="block">
                    <!--这是个多选会员类别的多选框-->
              <el-row>
                <el-col :span="2" >
                <el-checkbox  :indeterminate="isIndeterminate" v-model="checkAll" @change="handleCheckAllChange">全选</el-checkbox>
                </el-col>
                <el-col :span="16" >
                <el-checkbox-group v-model="checkedCities" @change="handleCheckedCitiesChange">
                  <el-checkbox v-for="city in cities" :label="city" :key="city">{{city}}</el-checkbox>
                </el-checkbox-group>
                </el-col>
              </el-row>

              </div>

            </el-form-item>


            <el-form-item label="促销规则："  >


              <div class="block">



                <el-radio v-model="rule" label="1">满减</el-radio>
                <el-radio v-model="rule" label="2">折扣</el-radio>
                <el-radio v-model="rule" label="3">赠送</el-radio>


              </div>

            </el-form-item>

            <!--各种促销规则动态添加-->
      <div>
        <el-row>
          <el-col :span="4" >
              <el-form-item label="订单满"  >

                <el-input type="text" v-model="form.address" style="width: 100px"></el-input>

              </el-form-item>
          </el-col>
          <el-col :span="4" >
              <el-form-item label="，立减"  >

                <el-input type="text" v-model="form.address" style="width: 100px"></el-input>

              </el-form-item>

          </el-col>
        <el-col :span="4">
          <label>元</label>
        </el-col>
        </el-row>
      </div>



            <el-form-item label="经办人员："  >


              <el-input
                type="text"
                v-model="form.address"
                style="width: 380px"
              >
              </el-input>

            </el-form-item>
            <el-form-item label="备注："  >


              <el-input
                type="text"
                v-model="form.address"
                style="width: 380px"
              >
              </el-input>

            </el-form-item>
          </el-form>
        </el-col>
      </el-row>







    </div>

</template>

<script>
  const   end = new Date();

  const   start = new Date();

  const cityOptions = ['上海', '北京', '广州', '深圳'];

    export default {
        name: "AddPromotion",

      data() {
        return {
          //order这是判断是 新增 审核 详情 修改 哪一个
          order:"",


          //选择的时间值
          value: [start,end],
          //单选框周几的值
          radio:'4',
          //单选框的规则
          rule:'2',
          //多选框的数据
          checkAll: false,
          checkedCities: ['上海', '北京'],
          cities: cityOptions,
          isIndeterminate: true,
          //表单数据绑定
          form: {
            address: "",
            teachArea: "",
            teachingPart: '',
            date2: ''
          },
        }
        },
      methods:{
          //多选框两个方法
        handleCheckAllChange(val) {
          this.checkedCities = val ? cityOptions : [];
          this.isIndeterminate = false;
        },
        handleCheckedCitiesChange(value) {
          let checkedCount = value.length;
          this.checkAll = checkedCount === this.cities.length;
          this.isIndeterminate = checkedCount > 0 && checkedCount < this.cities.length;
        },
          //获取上个页面跳转过来的数据
          getInfo(){
            this.order=this.$route.params.order;
           if(this.$route.params.row){
             console.info(this.$route.params.order+","
               +this.$route.params.row.date);
           }
          }
      },
      //页面挂载后，执行获取上个页面的方法
      created(){
          this.getInfo();

      },
    }
</script>

<style scoped>

</style>
